<template >
	<div class="contain-report">
		<div class="report-title">学生管理</div>
		<div class="report-search">
			<el-input
					size="small"
					style="width: 200px;margin-right: 20px"
					placeholder="请输入手机号码"
					clearable
					@clear="getList"
					v-model="form.phone"
			>
			</el-input>
			<el-input
					size="small"
					style="width: 200px;margin-right: 20px"
					placeholder="请输入用户名"
					clearable
					@clear="getList"
					v-model="form.userName"
			>
			</el-input>
			<el-button type="primary" size="small" @click="searchList">查 询</el-button>
			<el-button  size="small" @click="resetForm">重 置</el-button>
		</div>
		<div class="report-btns">
			<el-button type="primary" size="small" @click="downloadFile" style="margin-right: 20px">模板下载</el-button>
			<el-upload
					class="upload-demo"
					:action= uploadUrl
					:headers = myHeaders
					ref="upload"
					:on-success="leadingIn"
					:limit="1"
					:data="uploadData"
					:show-file-list="false"
			>
				<el-button size="small">批量导入</el-button>
			</el-upload>
      <el-button type="success" size="small" style="margin-left: 20px" @click="addDialog = true">新 建</el-button>
		</div>
		<div class="report-table">
			<el-table
					:data="tableData"
					style="width: 100%">
				<el-table-column label="手机号" align="center" prop="phone">
				</el-table-column>
				<el-table-column label="学号"  align="center" prop="studentNumber">
				</el-table-column>
				<el-table-column label="审核状态"  align="center">
					<template slot-scope="scope">
						{{scope.row.status === 1? '审核通过' : scope.row.status === 2? '驳回' : '待审核'}}
					</template>
				</el-table-column>
				<el-table-column label="班级"  align="center" >
					<template slot-scope="scope">
						{{scope.row.className ? scope.row.className : '暂未分配'}}
					</template>
				</el-table-column>
				<el-table-column label="姓名"  align="center" prop="userName">
				</el-table-column>
				<el-table-column label="操作"  align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="applyUser(scope.row.id)">审核</el-button>
						<el-button type="text" @click="settingClass(scope.row)">分配班级</el-button>
						<el-button type="text" @click="settingLaboratory(scope.row)">分配实验室</el-button>
						<el-button type="text" @click="deleteStudent(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[5]"
					:page-size="5"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		
		<!--		分配班级弹窗-->
		<el-dialog
				:visible.sync="classDialog"
				width="30%"
		>
			<div class="dialog-box">
				<div class="box-top">分配班级</div>
				<div class="box-body">
					<el-form label-width="100px">
						<el-form-item label="班 级:">
							<el-select placeholder="请选择班级" v-model="distributionForm.classId" style="width: 100%" size="small">
								<el-option
										v-for="item in classData"
										:key="item.id"
										:label="item.className"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button type="primary"  @click="submitClass" size="small" >确 定</el-button>
						<el-button size="small"  @click="classDialog = false">关 闭</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
		<!--		分配实验室-->
		<el-dialog
				:visible.sync="roomDialog"
				width="30%"
		>
			<div class="dialog-box">
				<div class="box-top">分配实验室</div>
				<div class="box-body">
					<el-form label-width="100px">
						<el-form-item label="实验室:">
							<el-select placeholder="请选择实验室" v-model="laboratoryForm.laboratoryId" style="width: 100%" size="small" multiple>
								<el-option
										v-for="item in laboratory"
										:key="item.id"
										:label="item.laboratoryName"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button type="primary"  @click="submitLaboratory" size="small" >确 定</el-button>
						<el-button size="small"  @click="roomDialog = false">关 闭</el-button>
					</div>
				</div>
			</div>
		</el-dialog>

    <el-dialog
        :show-close="false"
        :visible.sync="addDialog"
        width="40%"
    >
      <div class="dialog-box">
        <div class="box-top">新建学生</div>
        <div class="box-body">
          <el-form label-width="80px">
            <el-form-item label="姓名:">
              <el-input placeholder="请输入姓名" v-model="addForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="手机号:">
              <el-input placeholder="请输入手机号" type="number" v-model="addForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="账号:">
              <el-input placeholder="请输入账号" v-model="addForm.studentNumber"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
              <el-input placeholder="请输入姓名" v-model="addForm.passWord"></el-input>
            </el-form-item>
            <el-form-item label="班级:">
              <el-select placeholder="请选择班级" v-model="addForm.classId" style="width: 100%">
                <el-option
                    v-for="item in classData"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="实验室:">
              <el-select placeholder="请选择实验室" multiple v-model="addForm.laboratoryId" style="width: 100%">
                <el-option
                    v-for="item in laboratory"
                    :key="item.id"
                    :label="item.laboratoryName"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="form-btn">
            <el-button type="primary" size="small" @click="submitAdd" style="margin-right: 20px">提 交</el-button>
            <el-button size="small" @click="addDialog = false">取 消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
	</div>
</template >

<script >
    import request from "../../utils/request";
    import common from "../../utils/common";
	import { allClass } from "../../api/class";
	import { laboratoryList } from "../../api/notice";
    import { searchUserList,deleteUser,distributionClass, distributionLaboratory,examineStudent,addStudent} from "../../api/student";

    export default {
        name: "userManagement",
        data(){
            return{
                uploadUrl: common.requestUrl + '/user/upload',
                myHeaders: {
                    satoken: ''
                },
                uploadData:{
                    status:1
                },
                classDialog:false,
                roomDialog:false,
                form:{
                    pageIndex: 1,
                    pageSize: 5,
                    phone: "",
                    roleFlag: 3,
                    userName: ""
                },
                classData:[],
                laboratory:[],
                tableData:[],
                total:null,
              addForm: {
                classId: null,
                laboratoryId: [],
                passWord: "123456",
                phone: "",
                studentNumber: "",
                userName: ""
              },
              addDialog: false,
                distributionForm:{
                    id:null,
                    classId:null
                },
                laboratoryForm:{
                    userId:null,
                    laboratoryId:null
                }
            }
        },
        created () {
            this.myHeaders.satoken = sessionStorage.getItem('token')
        },
        mounted() {
            this.getClassList()
            this.getLaboratory()
            this.getList()
        },
        methods:{
            leadingIn(res){
                console.log(res)
                if (res.code !== 200){
                    this.$message.error(res.message)
                }else {
                    this.$message.success(res.message)
                    this.getList()

                }
                this.$refs.upload.clearFiles() //上传成功之后清除历史记录
            },
            downloadFile(){
                request({
                    url: common.requestUrl + "/user/downloadTemplate",
                    method: 'get',
                    responseType: 'blob',
                }).then(resp => {
                    console.log('ppp',resp)
                    const blob = new Blob([resp.data], {type: "application/vnd.ms-excel"});
                    const url = window.URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.download = '学生模板.xls';
                    a.href = url;
                    a.click();
                })  //导出文件请求
            },
            async getClassList(){
                const { data } = await  allClass()
                if (data.code === 200){
                    this.classData = data.data.data
                }
            },
            //查询实验室
            async getLaboratory(){
                const { data } = await laboratoryList()
                if (data.code === 200){
                    this.laboratory = data.data
                }
            },
            async getList(){
                const { data } = await searchUserList(this.form)
                console.log('pppppppp',data)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
            },
            searchList(){
                if (!this.form.phone && !this.form.userName ){
                    this.$message.error('请至少填写一位参数')
                }else{
                    this.getList()
                }
            },
            resetForm(){
                this.form.phone=''
                this.form.userName=''
                this.getList()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.form.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            },
            //	审核
            applyUser(id){
                this.$confirm('审核该学生, 是否继续?', '提示', {
                    confirmButtonText: '通过',
                    cancelButtonText: '不通过',
                    type: 'warning'
                }).then(() => {
                    examineStudent({userId:id,status: 1}).then(res => {
                        if (res.data.code === 200){
                            this.$message.success(res.data.message)
                            this.getList()
                        }
                    })
                }).catch(() => {
                    examineStudent({userId:id,status: 2}).then(res => {
                        if (res.data.code === 200){
                            this.$message.success(res.data.message)
                            this.getList()
                        }
                    })
                });
            },
            deleteStudent(id){
                this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteUser(id).then(res => {
                        if (res.data.code === 200){
                            this.$message.success(res.data.message)
                            this.getList()
                        }
                    })
                })
            },
          async submitAdd() {
            console.log(this.addForm)

            const {data} = await addStudent(this.addForm)
            if (data.code === 200) {
              this.$message.success(data.message)
              await this.getList()
              this.addForm = {}
              this.addDialog = false
            }
          },
            settingClass(item){
                this.distributionForm.id = item.id
                if (item.classId === -1){
                    this.distributionForm.classId = null
                }else{
                    this.distributionForm.classId = item.classId
                }
                this.classDialog = true
            },
            async submitClass(){
                console.log(this.distributionForm)
                const { data } = await distributionClass(this.distributionForm)
                if (data.code === 200){
                    this.$message.success(data.message)
                    this.classDialog = false
                    await this.getList()
                }
            },
            settingLaboratory(item){
                this.laboratoryForm.userId = item.id
                this.laboratoryForm.laboratoryId = item
                if (item.laboratoryId){
                    this.laboratoryForm.laboratoryId = item.laboratoryId
                }else {
                    this.laboratoryForm.laboratoryId = null
                }
                this.roomDialog = true
            },
            async submitLaboratory(){
                const { data } = await distributionLaboratory(this.laboratoryForm)
                if (data.code === 200){
                    this.$message.success(data.message)
                    this.roomDialog = false
                    await this.getList()
                }
            }
        }
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.dialog-box{
			width: 100%;
			min-height: 50vh;
			border-radius: 5px;
			overflow: hidden;
			.box-top{
				width: 100%;
				height: 10vh;
				background-image: linear-gradient(to left, #3591d4 0%, #50b3da 50%, #85f9e6 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26px;
				color: #fff;
			}
			.box-body{
				width: 100%;
				height: 80%;
				padding:5% 10%;
				box-sizing: border-box;
				background-color: #ffffff;
				/deep/.el-input__inner{
					border: none;
					background-color: #ecedef;
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #ecedef;
				}
				.form-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.file-list{
					margin-top: 20px;
					width: 100%;
					.file-box{
						margin-top: 10px;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.report-title{
			font-size: 22px;
			color: #666;
		}
		.report-search{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			p{
				margin: 0 10px;
				box-sizing: border-box;
				&:hover{
					cursor: pointer;
				}
			}
		}
		.report-btns{
			width: 100%;
			display: flex;
			align-items: center;
		}
		.report-table{
			width: 100%;
			margin: 20px 0;
			box-sizing: border-box;
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
